<template>
  <div class="header_wrapper_fix">
    <div class="fz24 tac cor_fff">{{ title }}</div>
    <div class="fz22 cor_fff">当前时间：{{ getTimeObj.year }}年{{ getTimeObj.month }}月{{ getTimeObj.day }}日 {{ getTimeObj.hour }}:{{ getTimeObj.minute }}:{{ getTimeObj.second }}:{{ getTimeObj.week}}</div>
  </div>
</template>

<script setup>

import { ref, reactive, onBeforeUnmount } from 'vue';
const timer = ref(null);
const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  }
})
const getTimeObj = reactive({
  year: null,
  month: null,
  day: null,
  hour: null,
  minute: null,
  second: null,
  week: null
});

onBeforeUnmount(() => {
  stopTimer();
});

const startTimer = () => {
  timer.value = setInterval(() => {
    updateCurrentTime();
  }, 1000);
};

startTimer();

const stopTimer = () => {
  clearInterval(timer.value);
};

const updateCurrentTime = () => {
  const now = new Date();
  getTimeObj.year = now.getFullYear();
  getTimeObj.month = String(now.getMonth() + 1).padStart(2, '0');
  getTimeObj.day = String(now.getDate()).padStart(2, '0');
  getTimeObj.hour = String(now.getHours()).padStart(2, '0');
  getTimeObj.minute = String(now.getMinutes()).padStart(2, '0');
  getTimeObj.second = String(now.getSeconds()).padStart(2, '0');
  getTimeObj.week = getWeekday(now);
};

const getWeekday = (date) => {
  const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  return weekdays[date.getDay()];
}


</script>

<style lang="less" scoped>

.header_wrapper_fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #000;
  z-index: 3;
}

</style>